<template>
	<view>
	<!-- 轮播图 -->
	 <view class="lbt">
	    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500" circular="true">
	      <swiper-item v-for="(item, index) in images">
	        <image :src="item" class="swiper-img" mode="aspectFill"></image>
	      </swiper-item>
	    </swiper>
	  </view>
	  <!-- 到店自取 -->
	  	<view class="tb">
			<navigator url="/pages/diancan/diancan" open-type="switchTab">
				<img style=" border-bottom-left-radius: 10px;" @click="op" src="../../static/lbt/4.jpg" alt="" />				  
			</navigator>
				<img style=" border-bottom-right-radius: 10px;" @click="op" src="../../static/lbt/5.jpg" alt="" />	  				  				   		
	  </view>
	  <!-- 9.9下单 -->
	  <view class="position">
	  	<view class="ipip">
	  	<navigator url="/pages/diancan/diancan" open-type="switchTab">
	  		<img @click="op" src="../../static/lbt/7.jpg" alt="" />				   
	  	</navigator>
	  </view>
	  <!-- 周边 -->
	  <view class="upup">
		  <img style="padding-right: 15px;" @click="op" src="../../static/lbt/8.jpg" alt="" />
	  	<navigator url="/pages/diancan/diancan" open-type="switchTab">
	  		<img @click="op" src="../../static/lbt/9.jpg" alt="" />				   
	  	</navigator>
	  </view>
	  <!-- 产品推荐 -->
	  <view class="ypyp">
		  <view class="yptext">产品推荐</view>
			<scroll-view class="scroll-view" scroll-x="true" @scroll="scroll" scroll-left="120">
				<img src="../../static/lbt/10.jpg"></img>
				<img src="../../static/lbt/11.jpg"></img>
				<img src="../../static/lbt/12.jpg"></img>
				<img src="../../static/lbt/13.jpg"></img>
				<img src="../../static/lbt/14.jpg"></img>
				<img style="padding-right: 0;" src="../../static/lbt/15.jpg"></img>
			</scroll-view>	
	  </view>
	  <!-- 店面招募 -->
	  <view class="kpkp">
			<view class="kp-text">便捷店招募<span><img style="width: 18px;height: 18px;float: right;" src="../../static/lbt/17.jpg" alt="" /></span></view>
			<image src="../../static/lbt/18.jpg"></image>
	  </view>
	  <!-- 底部图片 -->
			<view class="bottem-img">
				<image src="../../static/lbt/16.jpg"></image>
			</view>
	</view>
	</view>
</template>

<script>
	export default {
	  data() {
	    return {
	      images: [
	        '../../static/lbt/1.png',
	        '../../static/lbt/2.jpg',
	        '../../static/lbt/3.jpg',
			'../../static/lbt/33.jpg'
	      ]
	  }
	},
		methods: {
			op(){
		
			}
		}
	}

</script>

<style>
	.kpkp{
	    width: 21.70rem;
	    height: 9.625rem;
		background-color: #fff;
		margin-top: 20px;
		margin-left: 15px;
		border-radius: 10px;
	}
	.kpkp .kp-text{
		font-weight: 600;
		font-size: 15px;
		padding: 15px 10px 0 10px;
	}
	.kpkp image{
		height: 6.20rem;
		width: 20.5rem;
		margin: 10px 0 0 11px;
		border-radius: 8px;
	}
	.bottem-img image{
		width: 23.5875rem;
		height: 0.86875rem;
		margin-top: 20px;
	}
	.position{
		position: relative;
		top: -30px;
	}
	.ypyp{
		width: 21.65rem;
		height: 13.7875rem;
		background-color: #fff;
		border-radius: 10px;
		margin-left: 15px;
		margin-top: 15px;
	}
	.scroll-view {
	  white-space: nowrap;
	  width: 100%;
	  overflow: hidden;
	  padding-top: 10px;
	}
	.yptext{
		font-size: 15px;
		font-weight: 600;
		padding: 6px 0 0 10px;
	}
	.ypyp img{
		width: 7.4125rem;
		height: 10.7125rem;
		padding-right: 8px;
		border-radius: 8px;
	}
	.upup{
		display: flex;
		align-items: center;
		padding-top: 8px;
		padding-left: 17px;
	}
	.upup img {
		width: 10.3125rem;
		height: 10.6125rem;
		border-radius: 10px;
	}
	.ipip{
		padding-left: 17px;
	}
	.ipip img{
		width: 21.49375rem;
		height: 3.175rem;
	}
	.tb{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 21.625rem;
		height: 7.7475rem;;
		background-color: #221713;
		border-radius: 10px;
		position: relative;
			top: -45px;
			left: 16px;
	}
	.tb img{
		display: block;
		padding-top: 30px;
		width: 10.84rem;
		height: 6.125rem;
	}
	.lbt {
	  width: 100%;
	  height: 100%;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  background-color: #bcbcbc;
	}	
	 .background{
		 background-color:"#bcbcbc";
	 }
	.swiper {
	  width: 100%;
	  height: 300px;
	}	 
	.swiper-img {
	  width: 100%;
	  height: 100%;
	}
</style>
